<template>
	<view class="repair-list-page">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="number" placeholder="请输入维修单号"
				@iconClick="iconClick"></uni-easyinput>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-section">
			<view class="section-item">
				<text class="label">日期</text>
				<uni-datetime-picker class="date-value" type="date" :clear-icon="true" v-model="single"
					@maskClick="maskClick" />
			</view>

			<view class="section-item">
				<text class="label">维修方式</text>
				<uni-data-select class="type-value" v-model="selectType" :localdata="typeRange"
					@change="changeType"></uni-data-select>
			</view>

			<view class="section-item">
				<text class="label">状态</text>
				<uni-data-select class="status-value" v-model="selectStatus" :localdata="statusRange"
					@change="changeStatus"></uni-data-select>
			</view>
			<view class="section-item">
				<button class="search-btn" @click="filterSearch">查询</button>
			</view>
		</view>

		<!-- 维修表单 -->
		<view class="repair-list">
			<view class="repair-item" v-for="(item,index) in repairList" :key="index">
				<view class="info-left">
					<view class="repair-number">维修单号: {{item.number}}</view>
					<view class="info-type">维修方式: {{item.type===0?'到店维修':(item.type===1?'上门取车':'')}}</view>
					<view class="info-date">预约日期: {{item.date}}</view>
				</view>
				<view class="info-right">
					<!-- 动态绑定class，根据状态显示不同颜色 -->
					<view class="repair-status"
						:class="{ 'status-booking': item.status === 0,'status-processing': item.status === 1, 'status-completed': item.status === 2 }">
						{{ item.status === 0 ? '已预约' : (item.status === 1)?'维修中':'已完成' }}
					</view>
					<button class="detail-btn" @click="catDetails(item)">查看详情</button>

				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: 5,
				number: '',
				single: '',
				selectType: '',
				selectStatus: '',
				statusRange: [{
					text: '进行中',
					value: 0
				}, {
					text: '已完成',
					value: 1
				}],
				/* 维修状态 */
				typeRange: [{
					text: '到店维修',
					value: 0
				}, {
					text: '上门取车',
					value: 1
				}],
				/* 维修方式 */
				repairList: [{
						number: 12332112,
						status: 0,
						type: 0,
						date: '2025-05-29 11:00'
					},
					{
						number: 12598745,
						status: 1,
						type: 0,
						date: '2025-05-30 10:00'
					},
					{
						number: 14785212,
						status: 2,
						type: 1,
						date: '2025-06-01 10:00'
					},
					{
						number: 45665478,
						status: 1,
						type: 1,
						date: '2025-06-03 15:00'
					}
				],
			}
		},
		methods: {
			iconClick() {
				console.log("搜索的单号是:", this.number);
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			changeType(e) {
				console.log("维修方式", e);
				this.selectType = e;
			},
			changeStatus(e) {
				console.log("状态", e);
				this.selectStatus = e;
			},
			filterSearch() {
				console.log("点击了筛选查询");
			},
			catDetails(item) {
				// 查看详情逻辑，可跳转详情页
				uni.navigateTo({
					// url: `/pages/repairDetail/repairDetail?number=${item.number}`,
					url: '/pages/repairTask/repairDetails/repairDetails'
				});
			},

		}
	}
</script>

<style>
	.repair-list-page {
		padding: 10rpx;
		background-color: #fff;
		height: 100vh;
	}

	.search-bar {
		width: 700rpx;
		height: 60rpx;
		padding: 10rpx 20rpx;
		margin-bottom: 40rpx;
	}

	.filter-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx;

	}

	.section-item {
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: 16rpx;
	}

	.search-btn {
		display: flex;
		align-items: end;
		width: 130rpx;
		height: 80rpx;
		color: #eee;
		background-color: #007aff;
		margin-bottom: -36rpx;
	}

	.date-value {
		width: 250rpx;
	}

	.type-value,
	.status-value {
		width: 160rpx;
	}

	.repair-list {
		margin-top: 20rpx;
	}

	.repair-item {
		border-bottom: 2rpx solid #eee;
		padding: 20rpx;
		display: flex;
	}


	.repair-number {
		font-size: 32rpx;
		font-weight: bold;
	}

	.info-left {
		display: flex;
		align-items: left;
		flex-direction: column;
		margin-left: 20rpx;
		gap: 10rpx;
	}

	.info-right {
		position: absolute;
		right: 20rpx;
	}


	.repair-status {
		/* 状态标签的内边距，让背景更美观 */
		padding: 6rpx 12rpx;
		/* 圆角，使标签更圆润 */
		border-radius: 8rpx;
		font-size: 24rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.detail-btn {
		/* 按钮的背景色、文字色等样式，可根据需求调整 */
		background-color: #007aff;
		color: white;
		border: 1px solid #ddd;
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}

	/* 进行中状态样式 - 橙色 */
	.status-processing {
		background-color: #fff3e0;
		color: #ff9800;
	}

	/* 已完成状态样式 - 绿色 */
	.status-completed {
		background-color: #e8f5e9;
		color: #4caf50;
	}

	/* 已预约状态样式  */
	.status-booking {
		background-color: #e3f2fd;
		/* 浅蓝色背景，柔和不刺眼 */
		color: #1976d2;
	}
</style>